<!--
 * @Date: 2024-02-27 15:33:40
 * @Auth: 463997479@qq.com
 * @LastEditors: 463997479@qq.com
 * @LastEditTime: 2024-03-01 10:44:22
 * @FilePath: \ztc-web\src\views\statement\contentDialog.vue
-->
<template>
  <el-dialog
    v-model:modelValue="centerDialogVisible"
    title="无效列表"
    width="1000"
    center
    :destroy-on-close="true"
  >
    <d-table-search
      :columns="columns"
      :request="handleRequest"
      :header-cell-style="{
        background: '#f5f7fa',
      }"
      :pagination="{
        background: true,
        layout: 'total, sizes, prev, pager, next, jumper',
        small: 'small',
        pageSizes: [10, 200, 300, 400],
      }"
      :hasSearch="true"
      :has-page="true"
      ref="tableRef"
      :cardProp="{ shadow: 'never' }"
      border
    >
      <template #searchData="{ search }">
        <el-space>
          <el-form-item prop="ypyjTypeid">
            <el-select v-model="search.ypyjTypeid" placeholder="请选择研判类型">
              <el-option
                v-for="(item, index) in event_ypyj_typeid"
                :key="index"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-space>

        <el-space>
          <el-form-item label="时间" prop="time">
            <el-date-picker
              v-model="search.time"
              type="daterange"
              unlink-panels
              range-separator="至"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              value-format="YYYY-MM-DD hh:mm:ss "
            />
          </el-form-item>
        </el-space>
      </template>

      <template #num="data">
        <div
          @click="handleClick(data.data)"
          style="color: blue; cursor: pointer"
        >
          {{ data.data.num }}
        </div>
      </template>

      <template #action="data">
        <!-- <el-button link type="primary">operation add</el-button>
        <el-button link type="warning">peration edit</el-button> -->
      </template>
    </d-table-search>
  </el-dialog>
</template>

<script setup>
import { toRefs, watch } from "vue";
import DTableSearch from "@/components/Table/tableList.vue";
import { getInvalidEventList } from "@/api/assessment/index";

const props = defineProps({
  centerDialogVisible: {
    type: Boolean,
    default: false,
  },

  data: {
    type: Object,
    default: {},
  },
});
const emits = defineEmits();
const formData = ref({});
const tableRef = ref();
const { centerDialogVisible, data } = toRefs(props);

const { proxy } = getCurrentInstance();

const { event_ypyj_typeid } = proxy.useDict(
  "event_ypyj_typeid" //研判状态
);
const columns = [
  {
    type: "index",

    label: "序号",
    width: 62,
  },
  {
    prop: "eventPlateno",

    label: "车牌号",
  },
  {
    prop: "eventPasstime",
    label: "发生时间",
  },
  {
    prop: "eventYpTime",
    label: "研判日期",
  },

  {
    prop: "deviceName",
    label: "卡口信息",
  },
  {
    prop: "eventYpyj",
    label: "无效原因",
  },
];
watch(
  () => data,
  (newValue) => {
    formData.value = newValue;
    console.log(newValue);
  },
  { immediate: true, deep: true }
);
const handleCancel = (formEl) => {
  emits("update:modelValue", false);
  emits("handleCancel", formEl);
};

const handleRequest = (params, done) => {
  const obj = {
    ypyjTypeid: params.ypyjTypeid,
  };
  if (params.time) {
    obj.beginTime = params.time[0] + "";
    obj.endTime = params.time[1] + "";
  }
  getInvalidEventList({
    ...obj,
  }).then((res) => {
    console.log(res);
    done({ data: res.rows, total: res.total });
  });
};
</script>
